<template>
  <div class="add-container">
    <van-nav-bar
      title="发布评论"
      left-arrow
      placeholder
      fixed
      @click-left="$router.back()"
    />

    <van-field
      v-model="message"
      rows="6"
      autosize
      type="textarea"
      maxlength="140"
      placeholder="请输入留言"
      show-word-limit
    />
    <van-row>
      <van-col span="4" offset="3" @click="$router.back()">取消</van-col>
      <van-col span="4" offset="11" @click="btnOk">提交</van-col>
    </van-row>
  </div>
</template>

<script>
import { addComment } from '@/api/Subject'
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async btnOk() {
      if(!this.message) return this.$toast.fail('请输入内容')
      try {
        const {data } = await addComment({
          content: this.message,
          typeId: 1,
          valueId: this.$route.params.id
        })
        if(data.errno === 401) return this.$toast.fail('请先登录')
        this.$toast.success('发布成功')
        this.$router.back()
      } catch (error) {
        console.log(error);
      }
    }
  },
}
</script>

<style lang="less" scoped>
.add-container {
  background: rgb(245, 247, 249);
  height: 100vh;
}
/deep/ .van-row {
  font-size: 38px;
  margin-top: 30px;
  color: red;
}
  /deep/ .van-nav-bar__content {
  background: rgb(225, 28, 52);

  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon {
    color: #fff;
  }
</style>